import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Center(
            child: Text("Flex 布局"),
          )),
      body: MyHomeContent(),
      floatingActionButton: FloatingActionButton(
        onPressed: () => print("FloatingActionButton"),
        child: Icon(Icons.star),
      ),
    );
  }
}

class MyHomeContent extends StatefulWidget {
  @override
  State<MyHomeContent> createState() => _MyHomeContentState();
}

class _MyHomeContentState extends State<MyHomeContent> {
  var _isFavor = false;

  @override
  Widget build(BuildContext context) {
    var divider = Column(
      children: [
        Divider(height: 1, color: Colors.black),
        SizedBox.fromSize(size: Size.fromHeight(10))
      ],
    );
    return ListView(
      children: [
        Text("Stack 默认大小为包裹内容"),
        Text("是从左上角排列"),
        Stack(
          children: [
            Image.asset(
              "assets/images/mao.jpg",
              width: 150,
            ),
            Container(width: 100, height: 100, color: Colors.red),
            Text("m喵喵喵", style: TextStyle(fontSize: 30))
          ],
        ),
        divider,
        Text("可以设置 alignment 改变默认的排列方式，如下为 bottomEnd"),
        Stack(
          alignment: AlignmentDirectional.bottomEnd,
          children: [
            Image.asset(
              "assets/images/mao.jpg",
              width: 150,
            ),
            Container(width: 100, height: 100, color: Colors.red),
            Text("m喵喵喵", style: TextStyle(fontSize: 30))
          ],
        ),
        divider,
        Text("fit 属性默认为 loose，以下为 expand，一般不会使用这个属性"),
        Container(
          height: 200,
          child: Stack(
            alignment: AlignmentDirectional.bottomEnd,
            fit: StackFit.expand,
            children: [
              Image.asset(
                "assets/images/mao.jpg",
                width: 150,
              ),
              Container(width: 100, height: 100, color: Colors.red),
              Text("m喵喵喵", style: TextStyle(fontSize: 30))
            ],
          ),
        ),
        divider,
        Text("以 stack 为父元素，进行绝对定位"),
        Stack(
          children: [
            Image.asset(
              "assets/images/mao.jpg",
              width: 150,
            ),
            Positioned(
                right: 100,
                top: -40,
                child: Container(width: 100, height: 100, color: Colors.red)),
            Positioned(
                right: -20,
                bottom: 30,
                child: Text("m喵喵喵", style: TextStyle(fontSize: 30)))
          ],
        ),
        divider,
        Container(
          height: 250,
          child: Stack(
            alignment: AlignmentDirectional.bottomStart,
            clipBehavior: Clip.none,
            children: [
              Positioned(
                  top: 60,
                  child: Container(
                    width: 350,
                    child: Text(
                        "绝对定位中 overflow 已经过期 clipBehavior 默认为 hardEdge 就是‘硬剪’ 设置为 none 即不裁剪，其他的百度",
                        maxLines: 3),
                  )),
              Image.asset(
                "assets/images/mao.jpg",
                width: 150,
              ),
              Positioned(
                  right: 100,
                  top: -40,
                  child: Container(width: 100, height: 100, color: Colors.red)),
              Positioned(
                  right: -20,
                  bottom: 30,
                  child: Text("m喵喵喵", style: TextStyle(fontSize: 30)))
            ],
          ),
        ),
        divider,
        Stack(
          children: [
            Image.asset(
              "assets/images/mao.jpg",
              width: 200,
              height: 150,
              fit: BoxFit.fill,
            ),
            Positioned(
                bottom: 0,
                child: Container(
                    width: 200,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text("这是一只猫", style: TextStyle(color: Colors.white)),
                        IconButton(
                            icon: Icon(Icons.favorite,
                                color: _isFavor ? Colors.red : Colors.white),
                            onPressed: () {
                              print("点击了 favorite");
                              setState(() {
                                _isFavor = !_isFavor;
                              });
                            })
                      ],
                    ),
                    color: Color.fromARGB(150, 0, 0, 0),
                    padding: EdgeInsets.symmetric(horizontal: 5))),
          ],
        ),
        divider,
      ],
    );
  }
}
